<template>
  <div class='home'>
       <div class='home'>
           <a-breadcrumb style="margin: 16px 20px">
          <a-breadcrumb-item>
            <router-link to="/layout/">工作台</router-link>
          </a-breadcrumb-item>
            <router-link to="/layout/list">所有文章</router-link>

        </a-breadcrumb>
      <div style="width:100vw;height:100vh;margin: 0 auto;">
     

  <div style="width:1240px;height:150px;background:#fff;margin: 20px 25px;">

 所有文章
    
  </div>
<div style="width:1240px;height:500px;background: #fff;margin: 20px 25px;">
 <div style="margin-bottom: 16px">
      <!-- <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        Reload
      </a-button> -->
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="list"
    >
    <template #bodyCell="{column,record}">
    <template v-if="column.dataIndex==='operation'">
    <a-popconfirm
    v-if="list.length"
    title="Are you sure delete this task?"
    
    @confirm="edit(record)"
    
  >
    <a href="#"><button>edit</button></a>
  </a-popconfirm>
     <a-popconfirm
    v-if="list.length"
    title="Are you sure delete this task?"
    
    @confirm="onDelete(record.id)"
    
  >
    <a href="#"><button>Delete</button></a>
  </a-popconfirm>
    </template>

    </template>
    </a-table>
  </div>
  

  </div>
  </div>
  </div>
</template>

<script lang="ts">
import { computed,ref, reactive, toRefs, onMounted, defineComponent } from 'vue';
import {listA,delA} from '../../api'
type Key = string | number;

interface DataType {
  key: Key;
  name: string;
  title: string;
  word: string;
}


const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '描述',
    dataIndex: 'word',
  },
    {
    title: '操作',
    dataIndex: 'operation',
  },
];




export default defineComponent({
   

 setup() {
   
   let list:any=ref<DataType>()
    listA().then(res=>{
      list.value=res.data.data
    })
    
    const onDelete=async(id:any)=>{
        const res=await delA(id)
      list.value=res.data.data

    }

    const state = reactive<{
      selectedRowKeys: Key[];
      loading: boolean;
    }>({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    const start = () => {
      state.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
      }, 1000);
    };
    const onSelectChange = (selectedRowKeys: Key[]) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    return {
      list,
      columns,
      hasSelected,
      ...toRefs(state),

      // func
      start,
      onDelete,
      onSelectChange,
    };
  },



});

   

  

</script>